<template>
	<view>
		<template v-if="!loading">
			<view v-if="!video.length" class="flex imageBox" style="flex-wrap: wrap;">
				<template v-if="imageList.length==1">
					<view v-for="(item,index) in imageList" :key="index">
						<image style="width: 580rpx;height: 500rpx;margin: 0;" :src="item.url" mode="aspectFill"
							@click="clickImage(index)"></image>
					</view>
				</template>
				<template v-else>
					<template v-for="(item,index) in imageList">
						<view v-if='index<9' :key="index">
							<image :src="item.url" mode="aspectFill" @click="clickImage(item.url)"></image>
							<view v-if="index==8&&imageList.length>9" class="hiddenImage" @click="clickImage(index)">
								+{{imageList.length-9}}
							</view>
						</view>
					</template>
				</template>
			</view>
			<view v-if="!imageList.length" class="flex videoBox" :id='`video${index}`'>

				<video :style="{zIndex:object_fit=='contain'?111111111111111111111111111:1}" :id="`paly${index}`"
					:autoplay="index==playIndex" @fullscreenchange='fullscreenchange' :object-fit='object_fit'
					v-for="item in video" :src="item" controls></video>
			</view>
		</template>
		<template v-else>
			<view class="flex imageBox">
				<view v-for="(item,index) in 2" :key="index" class="Skeleton"
					style="width: 290rpx;height: 290rpx;margin-right: 20rpx;" />
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		name: "album",
		props: ['imageList', 'video', 'loading', 'index', 'playIndex'],
		data() {
			return {
				object_fit: 'cover',
			};
		},
		watch: {
			playIndex() {
				const query = uni.createSelectorQuery().in(this)
				if (this.playIndex == this.index) {
					query.select(`#paly${this.playIndex}`).fields({
						context: true
					}, data => {
						console.log(data?.context)
						data?.context?.play()
					}).exec();
				} else {
					query.select(`#paly${this.index}`).fields({
						context: true
					}, data => {
						console.log(data?.context)
						data?.context?.pause()
					}).exec();
				}

			}
		},
		mounted() {

		},
		methods: {
			clickImage(url) {
				uni.previewImage({
					urls: urlList.map(item => item.url),
					current: url
				});
			},
			fullscreenchange(e) {
				if (e.detail.fullScreen) {
					this.object_fit = 'contain'
				} else {
					this.object_fit = 'cover'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.flex {
		display: flex;
	}

	.imageBox {
		>view {
			position: relative;
		}



		image {
			height: 185rpx;
			width: 185rpx;
			margin-right: 10rpx;
			border-radius: 8rpx;
		}
	}

	.videoBox {
		video {
			height: 600rpx;
			border-radius: 8rpx;
			width: 600rpx;
		}

		.videoBoxIamgeBox {
			flex-direction: column;
			justify-content: space-between;

			image {
				width: 100%;
				height: 100%;
			}

			>view {
				position: relative;
				height: 125rpx;
				width: 170rpx;
			}

		}
	}

	.hiddenImage {
		position: absolute;
		background-color: rgba(0, 0, 0, 0.3);
		height: 185rpx;
		width: 185rpx;
		z-index: 1;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		top: 0;
		font-size: 40rpx;
		border-radius: 8rpx;
	}

	video,
	image {
		position: relative;
	}
</style>